import React, { useEffect } from 'react'
import { Header, RatingStar } from 'src/components'
import { imgBaseUrl } from 'src/config/env'
import { useQuery } from 'src/utils/hooks'

import './index.scss'
// 食物详情
const FoodDetail = () => {
    const query = useQuery()
    useEffect(() => {
        console.log(query, 'bbbb')
    }, [query])
    let foods = { specfoods: [{}] }

    try {
        foods = JSON.parse(decodeURI(query.foods))
    } catch (error) {

    }
    const { image_path, description, month_sales, name, rating, rating_count, satisfy_rate } = query

    return <div className="page_shop_fooddetail">
        <Header title={name} goBack></Header>
        <section className="header_img">
            <img src={`${imgBaseUrl}${image_path}`} className="food_img" alt="" />
            <div className="cover"></div>
        </section>
        <p className="description">{description}</p>
        <section className="detail_container">
            <section className="detail_left">
                <p>{name}</p>
                <div className="rating_sale">
                    <span>评分</span>
                    <RatingStar rating='rating' />
                    <span>{isNaN(Number(rating)) ? Number(rating).toFixed(1) : '0.0'}</span>
                </div>
                <p>
                    <span>月售 {month_sales}单</span>
                    <span>售价 ¥{foods.specfoods[0].price}</span>
                    {foods.specfoods.length > 0 && <span>起</span>}
                </p>
                <p>
                    <span>评论数 {rating_count}</span>
                    <span>好评率 {satisfy_rate}%</span>
                </p>
            </section>
            {/* <buy-cart shopId={shopId} foods={foods} moveInCart="emit('moveInCart')"></buy-cart> */}
        </section>
    </div>
}

export default FoodDetail